
<!--
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~      http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<ng-container *ngIf="'default' === compType" >
  <input #inputElm #styleElm placeholder="{{placeHolder}}"
         (keyup)="keyupHandler($event)" (focus)="focusHandler()" (blur)="blurHandler()"
         (mousedown)="$event.stopPropagation()" (mousemove)="$event.stopPropagation()"
         class="{{inputClass}} {{optionalClass}}" type="text" >
  <a href="javascript:" class="ddp-btn-delete" *ngIf="isEnableDelete && isNotEmptyInput()" (click)="clearValue()" [style.display]="isNotEmptyInput() ? 'block' : 'none'"></a>
</ng-container>

<ng-container *ngIf="'apply' === compType" >
  <div #styleElm class="ddp-input-apply {{optionalClass}}" >
    <input #inputElm placeholder="{{placeHolder}}"
           (keyup)="keyupHandler($event)" (focus)="focusHandler()" (blur)="blurHandler()"
           (mousedown)="$event.stopPropagation()" (mousemove)="$event.stopPropagation()"
           class="{{inputClass}}" type="text" >
    <em (click)="setValue()" class="ddp-icon-apply" ></em>
    <em class="ddp-icon-apply-loading"></em>
  </div>
</ng-container>

<ng-container *ngIf="'search' === compType" >
  <div #styleElm class="ddp-form-search {{optionalClass}}" >
    <em class="ddp-icon-search"></em>
    <input #inputElm placeholder="{{placeHolder}}"
           (keyup)="keyupHandler($event)" (focus)="focusHandler()" (blur)="blurHandler()"
           (mousedown)="$event.stopPropagation()" (mousemove)="$event.stopPropagation()"
           type="text" >
    <em *ngIf="showClear && isNotEmptyInput()" (click)="clearValue()" class="ddp-btn-search-close" ></em>
  </div>
</ng-container>
